<template>
    <div class="footer">
      <span>{{ copyrightInfo }}</span>
      <span>
        {{ footerDescription }} || 博客运行<a :style="background" class="time">{{time}}</a>
      </span>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'HomeFooter',
  props: {
    copyrightInfo: {
      type: String,
      default: '© 2018 技术初心，勇于探索'
    },
    footerDescription: {
      type: String,
      default: '© 2018 ruison.com || 京ICP备 || 12003892号-11'
    }
  },
  data () {
    return {
      time: '',
      background: {
        'color': ''
      }
    }
  },
  mounted () {
    const color = this.getBackground
    this.background.color = color
    this.timer = setInterval(this.getTime, 1000)
  },
  methods: {
    getTime () {
      var seconds = 1000
      var minutes = seconds * 60
      var hours = minutes * 60
      var days = hours * 24
      var years = days * 365
      var today = new Date()
      var todayYear = today.getFullYear()
      var todayMonth = today.getMonth() + 1
      var todayDate = today.getDate()
      var todayHour = today.getHours()
      var todayMinute = today.getMinutes()
      var todaySecond = today.getSeconds()
      var t1 = Date.UTC(2018, 11, 8, 16, 14, 0)
      var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond)
      var diff = t2 - t1
      var diffYears = Math.floor(diff / years)
      var diffDays = Math.floor((diff / days) - diffYears * 365)
      var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours)
      var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes)
      var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds)
      this.time = diffYears + '年' + diffDays + '天' + diffHours + '小时' + diffMinutes + '分钟' + diffSeconds + '秒'
    }
  },
  beforeDestroy () {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  computed: {
    ...mapGetters([
      'getBackground'
    ])
  }
}
</script>

<style scoped lang="stylus">
  .footer
    height 60px
    background #2E3137
    color #fff
    display flex
    justify-content center
    align-items center
    position absolute
    bottom 0
    left 0
    width 100%
    span
      display flex
      flex-flow row
      align-items center
      .time
        display inline-block
        padding-left 8px
        color #67C23A
        line-height 26px
    span:last-child
      margin-left 80px
</style>
